import { Button, message, Tag } from "antd";
import { pageAttendance, delAttendance } from "@/api/flandre-ui/request";
import { BasicTable, useTable, BasicColumn, TableAction } from "@/components/Table";
import DetailDrawer_AddUpdate from "./components/DrawerAddUpdate";
import { useDrawer } from "@/components/Drawer";
import "./index.less";
import { useTranslation } from "react-i18next";
import { IconEnum } from "@/enums/appEnum";

export default function AttendanceManagement() {
	const { t } = useTranslation();
	const en_vi = "HRMS.attendanceManagement";
	const [drawer_add_update, { openDrawer: openDrawerAddUpdate }] = useDrawer();

	// Table columns definition
	const columns: BasicColumn[] = [
		{
			title: t("felix_ui.staff_id"),
			dataIndex: "staffId",
			width: 100
		},
		{
			title: t(`HRMS.leaveApproval.staffName`),
			dataIndex: "staffName",
			width: 100
		},
		{
			title: t(`${en_vi}.attendanceDate`),
			dataIndex: "attendDate",
			width: 150,
			render: value => (value ? new Date(value).toISOString().split("T")[0] : "")
		},
		{
			title: t(`${en_vi}.workHours`),
			dataIndex: "workHours",
			width: 150
		},
		{
			title: t(`${en_vi}.attendanceType`),
			dataIndex: "attendType",
			width: 150,
			render: value => (value === "0" ? t(`${en_vi}.normal`) : value === "1" ? t(`${en_vi}.absent`) : t(`${en_vi}.unknown`))
		},
		{
			title: t(`${en_vi}.remarks`),
			dataIndex: "remarks",
			width: 200
		},
		{
			title: t(`${en_vi}.status`),
			dataIndex: "status",
			width: 100,
			render: value =>
				value === 1 ? <Tag color="success">{t(`${en_vi}.active`)}</Tag> : <Tag color="error">{t(`${en_vi}.inactive`)}</Tag>
		},
		{
			title: t("felix_ui.action"),
			key: "actions",
			fixed: "right",
			width: 220,
			render: (_: any, record: any) => (
				<TableAction
					actions={[
						{
							icon: IconEnum.EDIT,
							label: t("felix_ui.edit"),
							onClick: handleEdit(record)
						},
						{
							icon: IconEnum.DELETE,
							label: t("felix_ui.delete"),
							popConfirm: {
								title: t("common.deleteMessage"),
								placement: "left",
								confirm: handleDelete.bind(null, record)
							}
						}
					]}
				></TableAction>
			)
		}
	];

	const [patServicesTable, { reload }] = useTable({
		api: pageAttendance,
		columns,
		showTableSetting: false,
		showIndexColumn: false
	});

	// Edit
	const handleEdit = (record: Recordable) => () => {
		openDrawerAddUpdate(true, { record, action: "edit" });
	};

	// Add
	const handleAdd = () => {
		openDrawerAddUpdate(true, { action: "add" });
	};

	// Delete
	const handleDelete = async (id: any) => {
		try {
			await delAttendance(id);
			message.success(t("viewComponents.patientInformation.deleteSuccessfully"));
			reload();
		} catch (error) {
			t("viewComponents.patientInformation.deleteFailed");
		}
	};
	return (
		<div className="pageAttendance">
			<div>
				<div className="box1">
					<h1 className="title">{t(`${en_vi}.attendanceManagement`)}</h1>
					<Button type="primary" onClick={handleAdd}>
						+ {t(`${en_vi}.addAttendance`)}
					</Button>
				</div>
				<BasicTable register={patServicesTable}></BasicTable>
			</div>
			<DetailDrawer_AddUpdate reload={reload} register={drawer_add_update}></DetailDrawer_AddUpdate>
		</div>
	);
}
